// hooks(钩子)封装逻辑，提供响应式数据。
import { ref, onUnmounted } from 'vue'
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
import dayjs from 'dayjs'

/**
 * 数据懒加载函数
 * @param {}
 * @return {}
 */
export const useLazyData = (apiFn) => {
  // 1. 被观察的对象
  const target = ref(null)
  // 2. 用于存放后台数据的变量
  const list = ref([])
  const limit = ref(10)
  // stop             用于停止检测函数
  // target           被检测的元素
  // isIntersecting   布尔值，元素是否可见 true/false
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      // 如果元素可以，发送请求获取数据，并停止检测避免重复发送请求
      if (isIntersecting) {
        // 调用 API 获取数据
        apiFn(limit.value).then(({ result }) => {
          list.value = result
        })
        stop()
      }
    },
    { threshold: [0] }
  )
  // 钩子函数返回---> 响应式数据（目标元素, 后台数据）
  return { list, target }
}

/**
 * 支付倒计时函数
 * @param {}
 * @return {}
 */
export const usePayTime = () => {
  // 倒计时逻辑
  const time = ref(0)
  const timeText = ref('')
  const { pause, resume } = useIntervalFn(
    () => {
      time.value--
      timeText.value = dayjs.unix(time.value).format('mm分ss秒')
      if (time.value <= 0) {
        pause()
      }
    },
    1000,
    { immediate: false }
  )
  onUnmounted(() => {
    pause()
  })

  // 开启定时器countdown倒计时时间
  const start = (countdown) => {
    time.value = countdown
    timeText.value = dayjs.unix(time.value).format('mm分ss秒')
    resume()
  }

  return { start, timeText }
}
